<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue中使用组件的三大步骤:
            一、定义组件(创建组件)
            二、注册组件
            三、使用组件(写组件标签)

        一、如何定义一个组件?
            使用vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样,区别如下:
                1.el不要写，为什么?—最终所有的组件都要经过一个vm的管理，由vm中的e1决定服务哪个容器
                2.data必须写成函数，为什么?——避免组件被复用时，数据存在引用关系。
                备注:使用template可以配置组件结构。

        二、如何注册组件?
            1。局部注册:靠new Vue的时候传入components选项
            2.全局注册:靠Vue.component('组件名',组件)

        三、编写组件标签: 
    -->
<school></school>

    <div id="app">
        <!-- 编写组件标签 -->
        <school></school>
    </div>
    <script>
        //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
        Vue.config.productionTip = false;
        //创建局部(子)组件
        const student=Vue.extend({
            template:`
                <div>
                    <h2>学生名字：{{name}}</h2>
                    <h2>年龄：{{age}}</h2>
                </div>
            `,
            data() {
                return {
                    name:'张三',
                    age:18
                }
            }
        });

        //创建局部(父)组件
        const school=Vue.extend({
            template: `
                <div>
                    <h2>学校：{{schoolName}}</h2>
                    <h2>地址：{{address}}</h2>
                    <student></student>
                </div>
            `,
            data() {
                return {
                    schoolName:'尚硅谷',
                    address:'北京'
                }
            },
            //将子组件注册到父组件中(也称组件的嵌套)
            components:{
                student
            }
        });

        var vm = new Vue({
           el:'#app',
           //注册组件
           components:{
               school
           }
        });
    </script>
</body>

</html>